import {Layout} from '../../src/Layout';
export default Layout;

import docs from 'docs:react-aria-components';
import {ColorSwatchPicker as VanillaColorSwatchPicker, ColorSwatchPickerItem} from 'vanilla-starter/ColorSwatchPicker';
import '../../tailwind/tailwind.css';
import {InlineAlert, Heading, Content} from '@react-spectrum/s2'

export const tags = ['input'];
export const description = 'Displays a list of color swatches and allows a user to select one of them.';

# ColorSwatchPicker

<PageDescription>{docs.exports.ColorSwatchPicker.description}</PageDescription>

<ExampleSwitcher>
  ```tsx render docs={docs.exports.ColorSwatchPicker} links={docs.links} props={['layout']} initialProps={{'aria-label': 'Background color'}} type="vanilla" files={["starters/docs/src/ColorSwatchPicker.tsx", "starters/docs/src/ColorSwatchPicker.css"]}
  "use client";
  import {ColorSwatchPicker, ColorSwatchPickerItem} from 'vanilla-starter/ColorSwatchPicker';

  <ColorSwatchPicker/* PROPS */>
    <ColorSwatchPickerItem color="#A00" />
    <ColorSwatchPickerItem color="#f80" />
    <ColorSwatchPickerItem color="#080" />
    <ColorSwatchPickerItem color="#08f" />
    <ColorSwatchPickerItem color="#088" />
    <ColorSwatchPickerItem color="#008" />
  </ColorSwatchPicker>
  ```

  ```tsx render docs={docs.exports.ColorSwatchPicker} links={docs.links} props={['layout']} initialProps={{'aria-label': 'Background color'}} type="tailwind" files={["starters/tailwind/src/ColorSwatchPicker.tsx"]}
  "use client";
  import {ColorSwatchPicker, ColorSwatchPickerItem} from 'tailwind-starter/ColorSwatchPicker';

  <ColorSwatchPicker/* PROPS */>
    <ColorSwatchPickerItem color="#A00" />
    <ColorSwatchPickerItem color="#f80" />
    <ColorSwatchPickerItem color="#080" />
    <ColorSwatchPickerItem color="#08f" />
    <ColorSwatchPickerItem color="#088" />
    <ColorSwatchPickerItem color="#008" />
  </ColorSwatchPicker>
  ```

</ExampleSwitcher>

## Value

Use the `value` or `defaultValue` prop to set the selected color, and `onChange` to handle selection changes.  The value may be a string or <TypeLink type={docs.exports.Color} links={docs.links} /> object, parsed using the <TypeLink type={docs.exports.parseColor} links={docs.links} /> function.

```tsx render
"use client";
import {ColorSwatchPicker, ColorSwatchPickerItem} from 'vanilla-starter/ColorSwatchPicker';
import {parseColor} from 'react-aria-components';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(parseColor('#A00'));

  return (
    <>
      {/*- begin highlight -*/}
      <ColorSwatchPicker value={value} onChange={setValue}>
      {/*- end highlight -*/}
        <ColorSwatchPickerItem color="#A00" />
        <ColorSwatchPickerItem color="#f80" />
        <ColorSwatchPickerItem color="#080" />
        <ColorSwatchPickerItem color="#08f" />
        <ColorSwatchPickerItem color="#088" />
        <ColorSwatchPickerItem color="#008" />
      </ColorSwatchPicker>
      <pre style={{fontSize: 12}}>Selected color: {value.toString('rgb')}</pre>
    </>
  );
}
```

<InlineAlert variant="notice">
  <Heading>Color swatches must be unique</Heading>
  <Content>Equivalent colors in different color spaces are considered duplicates. For example, the values `#f00`, `hsl(0, 100%, 50%)`, and `hsb(0, 100%, 100%)` are all the same color. This is required for predictable selection behavior.</Content>
</InlineAlert>

## API

```tsx links={{ColorSwatchPicker: '#colorswatchpicker', ColorSwatchPickerItem: '#colorswatchpickeritem', ColorSwatch: 'ColorSwatch'}}
<ColorSwatchPicker>
  <ColorSwatchPickerItem>
    <ColorSwatch />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>
```

### ColorSwatchPicker

<PropTable component={docs.exports.ColorSwatchPicker} links={docs.links} />

### ColorSwatchPickerItem

<PropTable component={docs.exports.ColorSwatchPickerItem} links={docs.links} />
